<template>
    <div class="wrapper">
        <Headers></Headers>
        <tabs></tabs>
        <div class="list">
            <ul class="tabs">
                <li @click="all">全部</li>
                <li @click="good">精华</li>
                <li @click="share">分享</li>
                <li @click="ask">回答</li>
                <li @click="job">招聘</li>
                <li @click="dev">客户端测试</li>
            </ul>
            <div class="title">
                <ul>
                    <li v-for="(item,index) in list.data" :key="index" v-show="tabss == 'all' ? true : item.tab==tabss">
                        <img class="imgs" :src="item.author.avatar_url"/>
                        <div class="right">
                            <p class="usertitle">{{item.title}}</p>
                            <p class="userdesc">
                                {{item.reply_count}}/{{item.visit_count}}
                                <span>2天</span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import Headers from '../components/Header.vue'
import tabs from '../components/tabs.vue'
    export default {
        components:{Headers,tabs},
        data() {
            return {
                list:[],
                tabss:'all'
            }
        },
        mounted() {
               this.aaa()
        },
        methods: {
            async aaa(){
                let aaa=await this.$axios({
                    method:'get',
                    url:'https://cnodejs.org/api/v1/topics',
                },{
                    page:5
                })
                this.list=aaa.data
                console.log(this.list);
            },
            all(){
                this.$router.push({ path:"/home",query:{tab:"all"} })
                this.tabss=this.$route.query.tab;
                console.log(this.$route.query.tab);
                console.log(this.tabss);
            },
            good(){
                this.$router.push({ path:"/home",query:{tab:"good"} })
                this.tabss=this.$route.query.tab;
                console.log(this.$route.query.tab);
                console.log(this.tabss);
            },
            share(){
                this.$router.push({ path:"/home",query:{tab:"share"} })
                this.tabss=this.$route.query.tab;
                console.log(this.$route.query.tab);
                console.log(this.tabss);
            },
            ask(){
                this.$router.push({ path:"/home",query:{tab:"ask"} })
                this.tabss=this.$route.query.tab;
                console.log(this.$route.query.tab);
                console.log(this.tabss);
            },
            job(){
                this.$router.push({ path:"/home",query:{tab:"job"} })
                this.tabss=this.$route.query.tab;
                console.log(this.$route.query.tab);
                console.log(this.tabss);
            },
            dev(){
                this.$router.push({ path:"/home",query:{tab:"dev"} })
                this.tabss=this.$route.query.tab;
                console.log(this.$route.query.tab);
                console.log(this.tabss);
            }

        },
    }
</script>

<style lang="scss" scoped>
.wrapper{
    width: 100%;
    overflow: hidden;
    .list{
        width: 100%;
        margin-top: .3rem;
        .tabs{
            width: 100%;
            list-style: none;
            display: flex;
            li{
                float: left;
                font-size: .25rem;
                flex: 1;
                text-align: center;
                height: .5rem;
                line-height: .5rem;
                color: #80bd01;
                border-radius: .1rem;
            }
            li:hover{
                background: #80bd01;
                color: white;
            }
        }
        .title{
            width: 100%;
            ul{
                width: 100%;
                list-style: none;
                li{
                    height: .6rem;
                    border-bottom: 1px solid #ccc;
                    padding: .2rem;
                    display: flex;
                    .imgs{
                        width:.6rem;
                        height: .6rem;
                        background: pink;
                    }
                    .right{
                        float: right;
                        flex: 1;
                        .usertitle{
                            font-size: .3rem;
                            width: 6.3rem;
                            margin-left: .2rem;
                            overflow: hidden;
                            white-space:nowrap;
                            text-overflow: ellipsis;
                        }
                        .userdesc{
                            font-size: .2rem;
                            margin-left: .2rem;
                            color: #aaa;
                            span{
                                display: inline-block;
                                float:right;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>